<template>
  <view class="idle-detail-page">
    <!-- 自定义导航栏 -->
    <nav-bar title="闲置详情" :show-back="true"></nav-bar>
    
    <!-- 图片轮播 -->
    <view class="swiper-container">
      <swiper
        class="swiper"
        :indicator-dots="true"
        :autoplay="false"
        :duration="500"
        :circular="true"
        indicator-active-color="#ffffff"
      >
        <swiper-item v-for="(image, index) in idleData.images" :key="index">
          <image 
            :src="image" 
            mode="aspectFill" 
            class="slide-image"
            @click="previewImage(index)"
          ></image>
        </swiper-item>
      </swiper>
      <view class="type-tag" :class="idleData.type === 'sell' ? 'sell-tag' : 'buy-tag'">
        {{ idleData.type === 'sell' ? '出售' : '求购' }}
      </view>
    </view>
    
    <!-- 价格信息 -->
    <view class="price-section">
      <view class="price-content">
        <text class="price-symbol">¥</text>
        <text class="price-value">{{ idleData.price }}</text>
      </view>
      <view class="view-count">
        <tn-icon name="eye" size="28" color="#999999"></tn-icon>
        <text>{{ idleData.viewCount }}</text>
      </view>
    </view>
    
    <!-- 物品信息 -->
    <view class="info-section">
      <view class="title">{{ idleData.title }}</view>
      <view class="attributes">
        <view class="attribute-item">
          <text class="attr-label">分类</text>
          <text class="attr-value">{{ idleData.category }}</text>
        </view>
        <view class="attribute-item">
          <text class="attr-label">发布时间</text>
          <text class="attr-value">{{ idleData.createTime }}</text>
        </view>
        <view class="attribute-item" v-if="idleData.location">
          <text class="attr-label">交易地点</text>
          <text class="attr-value">{{ idleData.location }}</text>
        </view>
      </view>
      <view class="description">
        <view class="desc-title">详情描述</view>
        <view class="desc-content">{{ idleData.description }}</view>
      </view>
    </view>
    
    <!-- 卖家信息 -->
    <view class="user-section">
      <view class="user-info">
        <image class="user-avatar" :src="idleData.userAvatar" mode="aspectFill"></image>
        <view class="user-detail">
          <view class="user-name">{{ idleData.userName }}</view>
          <view class="user-school">{{ idleData.schoolName }}</view>
        </view>
      </view>
      <view class="user-buttons">
        <view class="follow-button" @click="followUser">{{ isFollowed ? '已关注' : '关注' }}</view>
      </view>
    </view>
    
    <!-- 猜你喜欢 -->
    <view class="recommend-section">
      <view class="section-title">猜你喜欢</view>
      <scroll-view class="recommend-scroll" scroll-x>
        <view class="recommend-items">
          <view 
            class="recommend-item" 
            v-for="(item, index) in recommendItems" 
            :key="index"
            @click="navigateToIdle(item.id)"
          >
            <image class="recommend-image" :src="item.image" mode="aspectFill"></image>
            <view class="recommend-title text-ellipsis">{{ item.title }}</view>
            <view class="recommend-price">¥{{ item.price }}</view>
          </view>
        </view>
      </scroll-view>
    </view>
    
    <!-- 底部操作栏 -->
    <view class="bottom-actions safe-area-inset-bottom">
      <view class="action-buttons">
        <view class="action-btn" @click="toggleFavorite">
          <tn-icon :name="isFavorite ? 'star-fill' : 'star'" size="36" :color="isFavorite ? '#FFD700' : '#999999'"></tn-icon>
          <text>{{ isFavorite ? '已收藏' : '收藏' }}</text>
        </view>
        <view class="action-btn" @click="shareItem">
          <tn-icon name="share" size="36" color="#999999"></tn-icon>
          <text>分享</text>
        </view>
        <button class="report-btn" @click="reportItem">举报</button>
      </view>
      <view class="contact-buttons">
        <button class="chat-btn" @click="contactUser">联系卖家</button>
        <button class="call-btn" @click="callUser">拨打电话</button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import NavBar from '@/components/navbar/NavBar.vue';

// 获取页面参数
const idleId = ref('');

// 闲置物品数据
const idleData = ref({
  id: 1,
  type: 'sell',
  title: '9成新 Apple iPad Pro 11寸 256G',
  price: 3800,
  description: '去年买的iPad Pro，因为换了新的iPad，现在出售，成色9成新，无划痕，配件齐全，有原装保护套和笔，价格可小刀。',
  category: '数码',
  images: [
    'https://picsum.photos/id/160/800/800',
    'https://picsum.photos/id/3/800/800',
    'https://picsum.photos/id/96/800/800'
  ],
  location: '图书馆附近',
  createTime: '2023-05-15 10:30',
  userId: 101,
  userName: '星遇用户1',
  userAvatar: 'https://picsum.photos/id/1005/100/100',
  schoolName: '示例大学',
  contact: '13812345678',
  viewCount: 156
});

// 收藏状态
const isFavorite = ref(false);

// 关注状态
const isFollowed = ref(false);

// 推荐物品
const recommendItems = ref([
  {
    id: 2,
    title: 'iPhone 14 Pro 256G 午夜色',
    price: 6999,
    image: 'https://picsum.photos/id/250/300/300'
  },
  {
    id: 3,
    title: 'MacBook Air M2 8+256G',
    price: 7500,
    image: 'https://picsum.photos/id/119/300/300'
  },
  {
    id: 4,
    title: 'AirPods Pro 2代',
    price: 1299,
    image: 'https://picsum.photos/id/7/300/300'
  },
  {
    id: 5,
    title: 'Apple Watch Series 8',
    price: 2580,
    image: 'https://picsum.photos/id/60/300/300'
  }
]);

// 预览图片
const previewImage = (index) => {
  uni.previewImage({
    current: index,
    urls: idleData.value.images
  });
};

// 收藏物品
const toggleFavorite = () => {
  isFavorite.value = !isFavorite.value;
  
  // 实际项目中应该调用API进行收藏操作
  uni.showToast({
    title: isFavorite.value ? '已收藏' : '已取消收藏',
    icon: 'none'
  });
};

// 关注用户
const followUser = () => {
  isFollowed.value = !isFollowed.value;
  
  // 实际项目中应该调用API进行关注操作
  uni.showToast({
    title: isFollowed.value ? '已关注' : '已取消关注',
    icon: 'none'
  });
};

// 分享物品
const shareItem = () => {
  // 实际项目中应该调用分享API
  uni.showShareMenu({
    withShareTicket: true,
    menus: ['shareAppMessage', 'shareTimeline']
  });
};

// 举报物品
const reportItem = () => {
  uni.showActionSheet({
    itemList: ['虚假信息', '违禁物品', '诈骗信息', '其他'],
    success: function(res) {
      uni.showModal({
        title: '举报',
        content: '确认提交举报？',
        success: function(modalRes) {
          if (modalRes.confirm) {
            // 实际项目中应该调用API提交举报
            uni.showToast({
              title: '举报已提交',
              icon: 'success'
            });
          }
        }
      });
    }
  });
};

// 联系卖家
const contactUser = () => {
  uni.navigateTo({
    url: `/pages/message/chat?userId=${idleData.value.userId}&userName=${encodeURIComponent(idleData.value.userName)}`
  });
};

// 拨打电话
const callUser = () => {
  uni.makePhoneCall({
    phoneNumber: idleData.value.contact,
    fail: () => {
      uni.showToast({
        title: '拨打电话失败',
        icon: 'none'
      });
    }
  });
};

// 导航到其他闲置物品
const navigateToIdle = (id) => {
  uni.navigateTo({
    url: `/pages/detail/idle-detail?id=${id}`
  });
};

// 获取闲置物品数据
const fetchIdleData = (id) => {
  // 实际项目中应该调用API获取物品数据
  console.log('获取闲置物品数据:', id);
  
  // 模拟延迟
  setTimeout(() => {
    // 增加浏览量
    idleData.value.viewCount++;
  }, 500);
};

onMounted(() => {
  // 获取页面参数
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  const options = currentPage.$page.options;
  
  if (options.id) {
    idleId.value = options.id;
    fetchIdleData(idleId.value);
  }
});
</script>

<style lang="scss" scoped>
.idle-detail-page {
  min-height: 100vh;
  background-color: #f8f8f8;
  padding-bottom: 150rpx;
}

.swiper-container {
  position: relative;
  height: 750rpx;
  
  .swiper {
    height: 100%;
    
    .slide-image {
      width: 100%;
      height: 100%;
    }
  }
  
  .type-tag {
    position: absolute;
    top: 20rpx;
    left: 0;
    padding: 10rpx 30rpx;
    color: #ffffff;
    font-size: 26rpx;
    border-radius: 0 30rpx 30rpx 0;
    
    &.sell-tag {
      background-color: #32C5FF;
    }
    
    &.buy-tag {
      background-color: #BA68C8;
    }
  }
}

.price-section {
  background-color: #ffffff;
  padding: 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  .price-content {
    .price-symbol {
      font-size: 32rpx;
      color: #FF5252;
      font-weight: bold;
    }
    
    .price-value {
      font-size: 48rpx;
      color: #FF5252;
      font-weight: bold;
    }
  }
  
  .view-count {
    display: flex;
    align-items: center;
    
    text {
      font-size: 26rpx;
      color: #999999;
      margin-left: 6rpx;
    }
  }
}

.info-section {
  margin-top: 20rpx;
  background-color: #ffffff;
  padding: 30rpx;
  
  .title {
    font-size: 36rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
    line-height: 1.4;
  }
  
  .attributes {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 30rpx;
    border-bottom: 1px solid #f5f5f5;
    
    .attribute-item {
      width: 50%;
      margin-bottom: 16rpx;
      display: flex;
      align-items: center;
      
      .attr-label {
        font-size: 28rpx;
        color: #999999;
        margin-right: 10rpx;
      }
      
      .attr-value {
        font-size: 28rpx;
        color: #333333;
      }
    }
  }
  
  .description {
    padding-top: 20rpx;
    
    .desc-title {
      font-size: 32rpx;
      font-weight: bold;
      margin-bottom: 16rpx;
    }
    
    .desc-content {
      font-size: 30rpx;
      line-height: 1.6;
      color: #333333;
    }
  }
}

.user-section {
  margin-top: 20rpx;
  background-color: #ffffff;
  padding: 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  .user-info {
    display: flex;
    align-items: center;
    
    .user-avatar {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      margin-right: 20rpx;
    }
    
    .user-detail {
      .user-name {
        font-size: 32rpx;
        font-weight: bold;
        margin-bottom: 6rpx;
      }
      
      .user-school {
        font-size: 26rpx;
        color: #999999;
      }
    }
  }
  
  .user-buttons {
    .follow-button {
      padding: 12rpx 30rpx;
      background-color: #f5f5f5;
      border-radius: 30rpx;
      font-size: 28rpx;
    }
  }
}

.recommend-section {
  margin-top: 20rpx;
  background-color: #ffffff;
  padding: 30rpx;
  
  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
  }
  
  .recommend-scroll {
    white-space: nowrap;
    
    .recommend-items {
      display: inline-flex;
      
      .recommend-item {
        width: 240rpx;
        margin-right: 20rpx;
        
        .recommend-image {
          width: 240rpx;
          height: 240rpx;
          border-radius: 12rpx;
          margin-bottom: 10rpx;
        }
        
        .recommend-title {
          font-size: 28rpx;
          max-width: 240rpx;
          margin-bottom: 6rpx;
        }
        
        .recommend-price {
          font-size: 30rpx;
          color: #FF5252;
          font-weight: bold;
        }
      }
    }
  }
}

.bottom-actions {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  padding: 16rpx 30rpx;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  
  .action-buttons {
    display: flex;
    align-items: center;
    margin-bottom: 16rpx;
    
    .action-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-right: 40rpx;
      
      text {
        font-size: 24rpx;
        color: #999999;
        margin-top: 6rpx;
      }
    }
    
    .report-btn {
      margin-left: auto;
      background-color: #ffffff;
      color: #999999;
      font-size: 28rpx;
      padding: 0;
      line-height: normal;
      
      &::after {
        border: none;
      }
    }
  }
  
  .contact-buttons {
    display: flex;
    
    button {
      flex: 1;
      height: 80rpx;
      border-radius: 40rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 30rpx;
      margin: 0 10rpx;
      
      &::after {
        border: none;
      }
    }
    
    .chat-btn {
      background-color: #32C5FF;
      color: #ffffff;
    }
    
    .call-btn {
      background-color: #76FF03;
      color: #333333;
    }
  }
}
</style> 